<template>
	<view class="content" :style="{ paddingTop: configStore.paddingTop + 10 + 'px', height: '100%' }">
		<hearbar></hearbar>
		<view class="head p-a-l">
			<up-swiper :list="list_swiper"></up-swiper>
			<up-tabs :list="list_tabs" @click="tabsClick"></up-tabs>
		</view>
		<view class="content-in p-l-l p-r-l p-b-safe back-gray flex">
			<List v-slot="{ tableList }" api='getForumList' :searchForm='searchForm' ref="list" style="width: 100%;">
				<view class="back-white div-content m-t-ll m-b-ll p-a flex flex-col box-border"
					v-for="(item, index) in tableList">
					<view class="flex align-center">
						<up-avatar name='share-square' size="30" :src="item.img_url"
							@click="jumpToShow(item.openid)"></up-avatar>
						<text class="font-16 m-l">{{ item.nick_name }}</text>
						<text class="m-l">{{ item.create_time }}</text>
					</view>
					<view class="flex-1 m-t">
						<rich-text class="font-18" :nodes='item.content'></rich-text>
					</view>
					<view class="m-b flex flex-between p-r-l">
						<view class="flex align-center">
							<button open-type="share" class="shared flex align-center">
								<up-icon name="share-square" size="24"></up-icon>
								<text class="font-14">分享</text>
							</button>
						</view>
						<view class="flex">
							<view class="flex align-center" @click="like(item)">
								<up-icon name="heart" size="24"
									:color="item.suport_user.includes(openid) ? 'red' : ''"></up-icon>
								<text>{{ item.suport_user.length === 0 ? "赞" : item.suport_user.length }}</text>
							</view>
							<view class="flex align-center m-l-ll" @click="commitDetail(item.id)">
								<up-icon name="more-circle" size="24"></up-icon>
								<text>评论</text>
							</view>
						</view>
					</view>
				</view>
			</List>
		</view>
		<tabbar></tabbar>
		<up-float-button @click="addComment" :isMenu="true" bottom='100px' right="20px" width="40px" height="40px">
		</up-float-button>
	</view>
</template>

<script setup>
import picture1 from "@/static/img/picture1.jpeg"
import picture2 from "@/static/img/picture2.jpeg"
import picture3 from "@/static/img/picture3.jpeg"
import List from "@/components/List.vue"
import { dbGet } from "../../utils/db"
import { likeOrForum } from "../../utils/api"
import {  onShareAppMessage, onReachBottom } from '@dcloudio/uni-app'
import {
	reactive,
} from 'vue';
onShareAppMessage(() => {
	return {
		title: "发送给好友",
		path: "pages/forum/index"
	}
})
onReachBottom(() => {
	uni.$emit("onReachBottom", "ok");
});
// 使用 reactive 创建响应式数组  
const list_swiper = reactive([
	picture1,
	picture2,
	picture3,
]);
const openid = dbGet("openid");
const list_tabs = reactive([
	{
		name: '热门'
	},
	{
		name: '日常'
	},
	{
		name: '焦宝'
	},
	{
		name: '郁宝'
	},
	{
		name: '迫宝'
	}
]);
const tabsClick = (item) => { }
const addComment = () => {
	uni.redirectTo({
		url: "/pages/forum/add"
	})
}
const like = (item) => {
	let like_status = item.suport_user.includes(openid) ? '0' : '1';
	likeOrForum({
		like_status,
		id: item.id
	}).then((res => {
		if (res.code === 200) {
			if (like_status === "0") {
				let index = item.suport_user.indexOf(openid);
				item.suport_user.splice(index, 1);
			} else {
				item.suport_user.push(openid);
			}
		}
	})).catch(() => { })
}
const commitDetail = (id) => {
	uni.redirectTo({
		url: `/pages/forum/detail?id=${id}`,
	});
}
const jumpToShow = (openid) => {
	uni.redirectTo({
		url: `/pages/home/show?openid=${openid}`
	})
}
</script>
<style lang="less" scoped>
.content {
	background: rgba(0, 0, 0, 0.1);
}

.head {
	background: white;
}

/deep/.u-float-button>view {
	display: flex;
}

.div-content {
	border-radius: 40upx;

	// height: 300upx;
}

.shared {
	background: rgba(0, 0, 0, 0);
	text-align: center;
	padding: 0 !important;

	&::after {
		border: none !important;
	}
}
</style>